<template>
  <el-dialog width="60%" title="更新产品" :visible.sync="updProductDialogVisible" @closed="closed">
    <template>
      <!-- 分配权限表单 -->
      <el-form :model="product" ref="updFormRef" :rules="rules" label-width="100px">
        <!-- id -->
        <el-form-item label="ID" prop="id">
          <el-input v-model="product.id" disabled />
        </el-form-item>

        <!-- productNum -->
        <el-form-item label="产品编号" prop="productNum">
          <el-input v-model="product.productNum" />
        </el-form-item>

        <!-- productName -->
        <el-form-item label="产品名" prop="productName">
          <el-input v-model="product.productName" />
        </el-form-item>

        <!-- cityName -->
        <el-form-item label="出发城市" prop="cityName">
          <el-input v-model="product.cityName" />
        </el-form-item>

        <!-- departureTime -->
        <el-form-item label="出发时间" prop="departureTime">
          <template>
            <el-date-picker v-model="product.departureTime" type="datetime" placeholder="选择日期时间" format="yyyy-mm-dd hh:MM" value-format="timestamp" />
          </template>
        </el-form-item>

        <!-- 价格 -->
        <el-form-item label="价格" prop="productPrice">
          <el-input v-model.number="product.productPrice" />
        </el-form-item>

        <!-- 产品描述 -->
        <el-form-item label="产品描述" prop="productDesc">
          <el-input v-model.number="product.productDesc" />
        </el-form-item>

        <!-- 产品状态 -->
        <el-form-item label="产品状态" prop="productStatus">
          <template>
            <el-radio-group v-model="product.productStatus">
              <el-radio-button label="0">未激活</el-radio-button>
              <el-radio-button label="1">激活</el-radio-button>
            </el-radio-group>
          </template>
        </el-form-item>
      </el-form>

      <!-- 按钮区域 -->
      <span slot="footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" @click="updProduct">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
// 请求
import { getProductByPid, updProduct } from '@/network/goodListRequest.js'

export default {
  data() {
    return {
      updProductDialogVisible: false,
      product: {},
      rules: {
        id: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        productNum: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        productName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        cityName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        departureTime: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        productDesc: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        productStatus: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      },
    }
  },
  methods: {
    /**
     * 打开
     */
    async open(pid) {
      this.updProductDialogVisible = true

      // 获取指定商品
      const { meta, data } = await getProductByPid(pid)
      if (meta.status != 200) {
        return this.$message.error(meta.msg)
      }
      this.product = data.product
    },

    /**
     * 关闭
     */
    closed() {
      this.updProductDialogVisible = false
      this.$refs['updFormRef'].clearValidate()
    },

    /**
     * 更新
     */
    async updProduct() {
      const ret = await this.$refs['updFormRef'].validate()
      if (!ret) {
        return this.$message.error('请将表单填写完整')
      }

      // 请求
      // console.log(this.product);
      const { meta } = await updProduct(this.product)
      if (meta.status != 200) {
        return this.$message.error(meta.msg)
      }
      this.updProductDialogVisible = false
      this.$bus.$emit('getGoodList')
      return this.$message.success(meta.msg)
    },
  },
  created() {
    this.$bus.$on('openUpdProductDialog', (pid) => this.open(pid))
  },
  destroyed() {
    this.$bus.$off('openUpdProductDialog')
  },
}
</script>

<style>
</style>